<template>
  <div id="brokenLine"></div>
</template>

<script>
import echarts from "/@/plugins/echarts";
import { ref, computed, onMounted, nextTick,reactive} from "vue";
import { defineAsyncComponent } from 'vue'
export default {
  name:"histogram",
  setup(){
        function initbrokenLine(){
           let myChart = echarts.init(document.getElementById('brokenLine'));
           myChart.clear()
           myChart.setOption({
            xAxis: {
                   type: 'category',
                   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
               },
               yAxis: {
                   type: 'value'
               },
               series: [{
                   data: [150, 230, 224, 218, 135, 147, 260],
                   type: 'line'
               }]
            });
          }
        onMounted(()=>{
            initbrokenLine();
        });
  }
}
</script>

<style>
  #brokenLine{
    margin: auto;
    width: 90%;
    height: 100%;
  }
</style>
